<template>
  <div>
    <Temp title="底图设置">
      <div class="baseMap">
        <el-scrollbar>
          <div class="baseMap-list">
            <div
              @click="switchMap(index)"
              v-for="(item, index) in mapList"
              :key="index"
              class="baseMap-list-item"
              :class="{
                'baseMap-list-item-active':
                  currentMapIndex === index
              }"
            >
              <el-image :src="item.fileUrl" alt="">
                <div slot="error" class="image-slot">
                  <div></div>
                </div>
              </el-image>
              <span class="name">{{
                item.name || item.serviceName
              }}</span>
              <div
                v-if="
                  currentMapIndex !== 0 &&
                  currentMapIndex === index &&
                  activeService.terrainUrl
                "
                class="terrain"
                @click.stop="toggleTerrain(index)"
              >
                <el-image
                  :src="
                    item.showTerrain
                      ? require('@/assets/img/icon_checked.png')
                      : require('@/assets/img/icon_unchecked.png')
                  "
                />
                <span>地形</span>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </Temp>
  </div>
</template>

<script>
import Temp from '@/components/utool/components/temp'
import { getAction } from '@/utils/helper'
import { globalBaseMap } from '@/utils/basemap'
import New from '@/utils/new'

const mapViewer = {}
export default {
  inject: ['viewerId'],
  components: {
    Temp
  },
  data() {
    return {
      currentMapIndex: 0,
      mapList: [],
      activeService: {}
    }
  },
  async created() {
    const { toolManager } = await getAction(this.viewerId)

    mapViewer[this.viewerId] =
      mapViewer[this.viewerId] || toolManager.viewer

    globalBaseMap[this.viewerId] =
      globalBaseMap[this.viewerId] ||
      toolManager.basemapManager
    this.mapList = globalBaseMap[this.viewerId].basemapList
    this.currentMapIndex =
      globalBaseMap[this.viewerId].currentBasemapIndex
    this.activeService =
      globalBaseMap[this.viewerId].currentHistoryImagery

    console.log(
      'imageryLayers',
      mapViewer[this.viewerId].scene.imageryLayers
    )

    New.$on('mapIndex', (data) => {
      this.activeService = data.active
    })
  },
  methods: {
    switchMap(index) {
      if (index !== this.currentMapIndex) {
        this.mapList[
          this.currentMapIndex
        ].showTerrain = false
        mapViewer[this.viewerId].terrainProvider =
          new Cesium.EllipsoidTerrainProvider({})

        globalBaseMap[this.viewerId].switchBasemap(index)
        this.currentMapIndex = index
      }
    },
    toggleTerrain(index) {
      this.mapList[index].showTerrain =
        !this.mapList[index].showTerrain
      globalBaseMap[this.viewerId].toggleTerrain(
        this.mapList[index].showTerrain
      )
      this.$forceUpdate()
    }
  }
}
</script>

<style lang="scss" scoped>
.baseMap {
  //min-width: 200px;
  width: 200px;
  padding: 12px;
  //display: grid;
  //grid-template-columns: repeat(3, auto);
  //column-gap: 10px;
  //row-gap: 10px;
  background-color: #193b51;
  border-radius: 0 0 8px 8px;
  overflow: hidden;

  &-list {
    display: flex;

    &-item + &-item {
      margin-left: 10px;
    }

    &-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      position: relative;

      & > .el-image {
        width: 70px;
        height: 50px;

        ::v-deep {
          .image-slot {
            width: 100%;
            height: 100%;

            & > div {
              width: 100%;
              height: 100%;
              background-color: gray;
            }
          }
        }
      }

      .name {
        margin-top: 4px;
        font-size: 12px;
        color: #fff;
      }

      .terrain {
        position: absolute;
        right: 0;
        top: 50px;
        transform: translateY(-100%);
        display: flex;
        align-items: center;
        background-color: rgba(49, 49, 49, 0.5);
        padding: 2px 4px;

        .el-image {
          width: 16px;
          height: 16px;
        }

        span {
          font-size: 12px;
          color: white;
        }
      }

      &-active {
        .name {
          color: rgb(0, 210, 255);
        }
      }
    }
  }
}
</style>
